<template>
    <div class="table-form-com">
        <el-form :model="form" ref="form">
            <Table
                :list="form.data"
                :submit="loading"
                :height="height"
                :summary="summary"
            >
                <el-table-column type="index" width="50" align="center" />
                <el-table-column
                    width="100"
                    label="操作"
                    v-if="!disabled && !closeOpr"
                >
                    <template slot-scope="scope">
                        <div class="btn-group">
                            <div class="btn-add" v-if="!hideAdd">
                                <el-button
                                    type="primary"
                                    icon="el-icon-plus"
                                    size="mini"
                                    circle
                                    @click="addItem(scope.$index)"
                                />
                            </div>
                            <div class="btn-del" v-if="!hideDel">
                                <el-button
                                    type="danger"
                                    circle
                                    icon="el-icon-delete"
                                    size="mini"
                                    @click="delItem(scope.$index)"
                                />
                            </div>
                        </div>
                    </template>
                </el-table-column>

                <template v-for="(v, i) in renderData">
                    <el-table-column
                        :key="i"
                        :width="v.width || 'auto'"
                        :label="v.label"
                        :prop="v.summary ? v.value : ''"
                        :fixed="v.fixed"
                    >
                        <template slot-scope="scope">
                            <!-- 只展示的数据 -->
                            <template v-if="v.inputType === 'none'">
                                <span
                                    class="disabled"
                                    :class="{
                                        error: checkSame(v, scope.row),
                                    }"
                                    :title="scope.row[v.value]"
                                    >{{ scope.row[v.value] }}</span
                                >
                            </template>
                            <template v-else>
                                <!-- 数字或文本输入 -->
                                <CellInput
                                    v-if="!v.select"
                                    v-model="scope.row[v.value]"
                                    @input="input(v, scope.row)"
                                    @change="blur(v, scope.row, scope.$index)"
                                    :inputType="v.inputType || 'text'"
                                    :decimal="v.decimal || 0"
                                    :class="{
                                        error: checkSame(v, scope.row),
                                    }"
                                    :prop="propName(scope.$index, v.value)"
                                    :ref="propName(scope.$index, v.value)"
                                    :rules="v.rules"
                                    :disabled="disabled"
                                />

                                <!-- 选择框 -->

                                <CellInput
                                    :data-selectLabel="scope.row[v.value]"
                                    v-else
                                    v-model="scope.row[v.value]"
                                    inputType="select"
                                    :select="selectOption(v)"
                                    :selectLabel="selectLabel(v)"
                                    :selectValue="selectValue(v)"
                                    :prop="propName(scope.$index, v.value)"
                                    :ref="propName(scope.$index, v.value)"
                                    :rules="v.rules"
                                    :disabled="disabled"
                                />
                            </template>
                        </template>
                    </el-table-column>
                </template>
                <slot></slot>
            </Table>
        </el-form>
    </div>
</template>

<script>
import CellInput from "@/components/CellInput";
export default {
    components: {
        CellInput,
    },
    props: [
        "list",
        "renderData",
        "loading",
        "disabled",
        "summary",
        "name",
        "model",
        "disabled",
        "closeOpr",
        "height",
        "hideAdd",
        "hideDel",
        "beforeAdd",
        "beforeDel",
    ],
    data: () => {
        return {
            form: {
                data: [],
            },
            onchangeLock: false,
        };
    },
    computed: {
        selectOption() {
            return (v) => {
                let o = [];
                let { select } = v;
                let { enums } = this.$store.state;
                if (typeof select === "string") {
                    o = enums[select].list;
                } else {
                    o =
                        typeof select.option === "string"
                            ? enums[select.option].list
                            : select.option;
                }
                return o;
            };
        },
        selectLabel() {
            return (v) => {
                let label = "";
                let { select } = v;
                let { enums } = this.$store.state;

                if (typeof select === "string") {
                    label = enums[select].label;
                } else {
                    label = select.selectLabel || select.option;
                }

                return label;
            };
        },
        selectValue() {
            return (v) => {
                let value = "";
                let { select } = v;
                let { enums } = this.$store.state;
                if (typeof select === "string") {
                    value = enums[select].value;
                } else {
                    value =
                        select.selectValue ||
                        select.selectLabel ||
                        select.option;
                }
                return value;
            };
        },
        propName() {
            return (i, v) => `data[${i}].${v}`;
        },
    },
    watch: {
        list(v) {
            this.onchangeLock = true;
            this.$set(this.form, "data", v);
            this.$nextTick(() => {
                this.onchangeLock = false;
            });
        },
        renderData(v) {},
    },
    created() {
        this.form.data = this.list;
    },
    methods: {
        checkType(t) {
            return Object.prototype.toString.call(t);
        },
        // 加入条目
        addItem(i) {
            let { beforeAdd } = this;
            let { data } = this.form;
            let l = data.length;
            let d = JSON.parse(JSON.stringify(data[i]));

            // beforeAdd为false时不再继续增加
            if (beforeAdd && typeof beforeAdd === "function") {
                // 自行决定处理逻辑
                if (beforeAdd(d, this.form, i) === false) return false;
            }

            this.form.data.splice(i, 0, d);
        },
        // 删除条目
        delItem(i) {
            let { beforeDel } = this;

            // beforeDel为false时不再继续删除
            if (beforeDel && typeof beforeDel === "function") {
                let d = this.form.data[i];
                // 自行决定处理逻辑
                if (beforeDel(d, this.form, i) === false) return false;
            }

            if (this.form.data.length <= 1) {
                this.$message.error("至少保留一条信息");
                return false;
            }
            this.form.data.splice(i, 1);
        },
        // 检查woodPurchaseInGoodsList中某两个值是否相同
        checkSame(v, d) {
            let { checkSame } = v;
            if (!checkSame) return false;
            try {
                let arr = checkSame.split(",");
                let a = d[arr[0]];
                let b = d[arr[1]];
                if (v.check === "compare") {
                    return a > b;
                } else {
                    return a != b;
                }
                return a != b;
            } catch (error) {
                return false;
            }
        },
        input(v, data) {
            let { onchangeLock } = this;
            let { onchange,afterChange } = v;
            if (!onchange || onchangeLock) return false;
            
            this.checkEvent(onchange,data);
            afterChange && this.checkEvent(afterChange,data);
        },
        // 检查并执行事件,传入事件为数组则逐个执行
        checkEvent(e,data){
            if (typeof e === "function") {
                e(data);
            } else if (
                Object.prototype.toString.call(e).includes("Array")
            ) {
                e.forEach((f) => {
                    typeof f === "function" && f(data);
                });
            }
        },
        blur(v, data, index) {
            let { changeBlur } = v;
            if (!changeBlur) return false;
            if (typeof changeBlur === "function") {
                changeBlur(data, index);
            } else if (
                Object.prototype.toString.call(changeBlur).includes("Array")
            ) {
                changeBlur.forEach(() => {
                    typeof f === "function" && f(data, index);
                });
            }
        },
        checkForm(cb) {
            this.$refs["form"].validate((pass, error) => {
                if (!pass) {
                    let k = Object.keys(error)[0];
                    let msg = error[k][0].message;
                    this.msgError(msg);
                    try {
                        this.$refs[k][0].editCell(1);
                    } catch (error) {}
                    return false;
                }
                cb && cb(pass, error);
            });
        },
    },
};
</script>

<style lang="scss" scoped>
::v-deep.table-form-com {
    .btn-group {
        display: flex;
        align-items: center;
        justify-content: space-evenly;
        min-height: 35px;
    }
    .disabled {
        font-size: 14px;
        color: #a8a8a8;
    }
    .error {
        color: #fa3e3e !important;
        input {
            color: #fa3e3e !important;
        }
    }
    .el-table {
        margin: 0 15px;
        width: calc(100% - 30px);
        border: 1px solid #eaeaea;
        border-radius: 5px;

        .cell {
            font-size: 12px;
            cursor: pointer;
            text-align: center;
        }
        .el-input--medium {
            .el-input__inner {
                height: 24px;
                line-height: 24px;
            }
            .el-input__icon {
                line-height: 24px;
            }
        }
        td {
            padding: 0;
            & + td {
                border-left: 1px solid #eaeaea;
            }
        }
        .el-table__body {
            td {
                padding: 0 5px;
                line-height: 20px;
                height: 20px;
                .el-button--mini.is-circle {
                    padding: 5px;
                }
            }
        }
    }
}
</style>